<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="prioritizers flex flex-col gap-y-4" cdkDropListGroup data-qa="prioritizers-component">
    @if (!isDisabled) {
        <div class="flex flex-col" data-qa="available-prioritizers-section">
            <div data-qa="available-prioritizers-label">
                Available Prioritizers
                <i
                    class="fa fa-info-circle primary-color"
                    nifiTooltip
                    [tooltipComponentType]="TextTip"
                    tooltipInputData="Prioritizers that are available to reprioritize FlowFiles in this processors work queue."></i>
            </div>
            <div
                class="cdk-list border"
                cdkDropList
                cdkDropListSortingDisabled
                [cdkDropListData]="availablePrioritizers"
                (cdkDropListDropped)="dropAvailable($event)"
                data-qa="available-prioritizers-list">
                @for (item of availablePrioritizers; track item; let i = $index) {
                    <div
                        class="prioritizer-draggable-item border m-1 font-bold"
                        cdkDrag
                        cdkDragPreviewContainer="parent"
                        data-qa="available-prioritizer-item">
                        <ng-container
                            *ngTemplateOutlet="
                                prioritizerItem;
                                context: { $implicit: item, i: i, canClose: false }
                            "></ng-container>
                    </div>
                }
            </div>
        </div>
    }
    <div class="flex flex-col" data-qa="selected-prioritizers-section">
        <div data-qa="selected-prioritizers-label">
            @if (!isDisabled) {
                Selected Prioritizers
            } @else {
                Prioritizers
            }
            <i
                class="fa fa-info-circle primary-color"
                nifiTooltip
                [tooltipComponentType]="TextTip"
                tooltipInputData="Prioritizers that have been selected to reprioritize FlowFiles in this processors work queue. Multiple selected prioritizers will be considered in order from top to bottom."></i>
        </div>
        @if (!isDisabled || selectedPrioritizers.length > 0) {
            <div
                class="cdk-list cdk-drag-selected border"
                [class.border-dashed]="!isDisabled"
                cdkDropList
                [cdkDropListDisabled]="isDisabled"
                [cdkDropListData]="selectedPrioritizers"
                (cdkDropListDropped)="dropSelected($event)"
                data-qa="selected-prioritizers-list">
                @for (item of selectedPrioritizers; track item; let i = $index) {
                    <div
                        class="prioritizer-draggable-item border m-1 font-bold"
                        cdkDrag
                        cdkDragPreviewContainer="parent"
                        [class.border-dashed]="isDisabled"
                        data-qa="selected-prioritizer-item">
                        <ng-container
                            *ngTemplateOutlet="
                                prioritizerItem;
                                context: { $implicit: item, i: i, canClose: true }
                            "></ng-container>
                    </div>
                }
            </div>
        } @else {
            <div class="unset" data-qa="no-selected-prioritizers">No value set</div>
        }
    </div>
    <ng-template #prioritizerItem let-item let-i="i" let-canClose="canClose">
        @if (!isDisabled) {
            <div class="flex items-center">
                <span class="grip pr-5"></span>
                <div class="prioritizer-name" [title]="getPrioritizerLabel(item)" data-qa="prioritizer-name">
                    {{ getPrioritizerLabel(item) }}
                </div>
                @if (hasDescription(item)) {
                    <i
                        class="pl-1 fa fa-info-circle neutral-color"
                        nifiTooltip
                        [tooltipComponentType]="TextTip"
                        [tooltipInputData]="item.description"></i>
                }
            </div>
            @if (canClose) {
                <button
                    class="pr-1"
                    type="button"
                    (click)="removeSelected(item, i)"
                    data-qa="remove-prioritizer-button">
                    <i class="fa fa-times neutral-contrast"></i>
                </button>
            }
        } @else {
            <div class="flex items-center tertiary-color font-medium">
                <div data-qa="prioritizer-name-readonly">{{ getPrioritizerLabel(item) }}</div>
                @if (hasDescription(item)) {
                    <i
                        class="pl-1 fa fa-info-circle neutral-color"
                        nifiTooltip
                        [tooltipComponentType]="TextTip"
                        [tooltipInputData]="item.description"></i>
                }
            </div>
        }
    </ng-template>
</div>
